<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/3/8
  Time: 13:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<html>
<head>
    <title>报修详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
     <style type="text/css">
     *{
     	font-size: 14px;
     }
     
        .myimg{
        	width: 90px;
		    margin: 10px;
		    height: 145px;
		    float: left;
        }
        
  .lc_date{
	float: right;color: #808080;margin-right: 50px;
}
.lc_time{
	float: right;color: #cccaca;
	margin-right: 50px;
	font-size: 10px;
}
.lc_name{
	float: left;
	color: #000000;
}
.lc_1{
	height: 16px;
	line-height:16px;
}

.lc_2{
	height: 60px;
	line-height: 60px;
}
.t1{
	font-size: 16px;
	margin-left: 50px;
	font-weight: 700;
	display: block;
}
.img_gou{
	width: 16px;
}
.gou_div{
	height: 9px;
	width: 9px;
	  border-radius:9px;
	background-color: afa5a5;
	margin-left: 4.5px;
	margin-top: 4.5px;
}
.shuxian{
	width: 3px;background-color: #e2d7d7;height: 60px;margin-left: 8.4px;
}
.form_left{
	float: left;
}

.separator1{
	border-top:solid 1px #999999;
	margin: 30px 50px;
}

.line_{
	margin-top: 10px;
}

    </style>
</head>
<body>
<!-- <div class="col-sm-12">
        <div style="margin: 2em 0 0 2em;">
            <font style="font-size: 1.5em;" id="f1"></font>
        </div>
        <div style="margin: 1em 0 0 2em;">
            <font style="font-size: 1.5em;" id="f2"></font>
        </div>
        <div id="f3" style="margin: 1em 0 0 0; border-top: 1px solid #777;">
        </div>
</div> -->
<div class="t1" style="margin-top: 30px">
	报修信息：
</div>
<div style="margin-left: 70px;width: 100%">
	<div class="line_">
	<div class="form_left">报修内容：</div><div id="f1"></div>
	</div>
	<div class="line_">
	<div class="form_left">上门时间：</div><div id="f2"></div>
	</div>
	<div class="line_">
	<div class="form_left">上传图片：</div><div id="f3" style="width:600px;height: 170px"></div>
	</div>
</div>

<div class="separator1"></div>
<div class="t1">
	维修进度：		
</div>
		
<div style="margin-left: 70px;margin-top: 10px">
	<div style="float: left;width: 24px">
		<c:forEach var="item" items="${datalist}" varStatus="status">
			<div style="height: 13.5px;">
				<div class="gou_div" <c:if test="${item.lc_finish==1}">style="background-color:28c5ff"</c:if>>
					<%-- <img alt="" src="<%=request.getContextPath()%>/static/images/admin/fix/gou.png" class="img_gou"> --%>
				</div>
			</div>
			<c:if test="${!(status.last && (apply_status=='4' || apply_status=='2'))}">
				<div style="" class="shuxian"></div>
			</c:if>
		</c:forEach>
		
	</div>

	<div style="margin-left: 24px;">
		<c:forEach var="item" items="${datalist}" varStatus="status">
			<div class="lc_1">
				<div class="lc_name" <c:if test="${item.lc_finish==1}">style="color:28c5ff"</c:if>>${item.lc1 }</div>
				<div class="lc_date">${item.date}&nbsp;${item.time}</div>
			</div>
			<div class="lc_2" <c:if test="${item.lc_finish=='1'}">style="color:28c5ff"</c:if>>
				${item.lc2 }
			</div>
		</c:forEach>
	</div>
</div>
		

<script type="text/javascript">
$(function () {
	if('${map}' != null){
		$("#f1").html("${map.intro}");
		if('${map.starttime}'!='' && '${map.endtime}'!=''){
			var arrStarTime = '${map.starttime}'.split("-");
			var arrEndTime = '${map.endtime}'.split("-");
			$("#f2").html(arrStarTime[1]+"月"+arrStarTime[2]+"日 — "+arrEndTime[1]+"月"+arrEndTime[2]+"日");
		}
		if('${map.pic}' != ''){
			var picimgs = '${map.pic}'.split(",");
			var img = '';
	    	for (var i = 0; i < picimgs.length; i++) {
				var url = '${url}'+picimgs[i];
	    		img+='<div class="myimg" style="background: url(\''+url+'\'); background-size: cover;" onclick="showpic(\'${url}'+picimgs[i]+'\')"></div>'
// 				img+='<img class="myimg" onclick="showpic(\'${url}'+picimgs[i]+'\')" src="${url}'+picimgs[i]+'" />';
			}
		}
		$("#f3").html(img);
	}
})
 //查看大图
    function showpic(content) {
        var html = '<div style="text-align: center;"><img style="margin-left: -18px;"  src="' + content + '" alt="报修图片"/></div>';
        parent.layer.open({
            title: '',
            btn: 0,
            area: ['80%', '80%'],
            content: html
        });
    }
</script>
</body>
</html>
